<template>
  <div class="mod-config">
    <div style="padding: 10px">
      <el-button type="primary" @click="handleDown">团体预警报告下载</el-button>
    </div>
    <div id="teamWarn" style="width: 100%">
      <h1>自动预警团体报告</h1>
      <div>
        <table border="1" class="table_style">
          <thead>
            <th colspan="8" style="font-size: 30px">基本信息</th>
          </thead>
          <tbody>
            <tr>
              <td class="minWidth">筛查样本数</td>
              <td class="minWidth">{{ headerData.sampleCount }}</td>
              <td class="minWidth">样本总数</td>
              <td class="minWidth">{{ headerData.sampleTotal }}</td>
              <td class="minWidth">样本比例</td>
              <td class="minWidth">{{ headerData.sampleRate * 100 + "%" }}</td>
            </tr>
            <tr>
              <td>量表名称</td>
              <td colspan="5">{{ headerData.tool }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>
        <table border="1" class="table_style">
          <thead>
            <th colspan="8" style="font-size: 30px">因子预警信息</th>
          </thead>
          <tbody>
            <tr>
              <td>因子名称</td>
              <td>预警分值</td>
              <td>预警等级</td>
              <td>样本数</td>
              <td>样本总数</td>
              <td>样本比例</td>
            </tr>
            <tr v-for="(item, index) in factorCollection" :key="index">
              <td>{{ item.factorName }}</td>
              <td>{{ item.warnScore }}</td>
              <td>{{ item.level == -1 ? "" : item.level }}</td>
              <td>{{ item.sampleCount }}</td>
              <td>{{ item.sampleTotal }}</td>
              <td>{{ item.sampleRate * 100 + "%" }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>
        <h3>符合条件人员列表</h3>
        <table border="1" class="table_style">
          <tbody>
            <tr>
              <td class="minWidth">登录名</td>
              <td class="minWidth">姓名</td>
              <td class="minWidth">性别</td>
              <td class="minWidth">年龄</td>
              <td class="minWidth">单位名称</td>
              <td
                v-for="(item, index) in sampleHeaderList.sampleFactorVOList"
                :key="index"
                class="minWidth"
              >
                {{ item.factorName }}
              </td>
            </tr>
            <tr v-for="(item1, index1) in sampleInfoList" :key="index1">
              <td>
                {{ item1.account }}
              </td>
              <td>{{ item1.realName }}</td>
              <td>
                {{ item1.sex == 1 ? "男" : headerData.sex == 2 ? "女" : "" }}
              </td>
              <td>{{ item1.age == -1 ? "" : item1.age }}</td>
              <td>{{ item1.companyName }}</td>
              <td
                v-for="(item2, index2) in item1.sampleFactorVOList"
                :key="index2"
              >
                <span :class="item2.warnStatus == 1 ? 'colorRed' : ''">{{
                  item2.score
                }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- <div id="echarts_box" style="width: 600px;height:400px;"></div> -->
    </div>
  </div>
</template>

<script>
import { getTeamWarn } from "@/api/census/report";
import htmlToPdf from "@/util/htmlToPdf";
import { getList } from "@/api/system/dict";
export default {
  name: "teamWarn",
  data() {
    // 和导出pdf没关系
    return {
      headerData: {},
      data: [],
      factorCollection: [],
      sampleInfoList: [],
      sampleHeaderList: [],
    };
  },
  created() {
    getList(1, 1000, { code: "warning_level" }).then((res) => {
      this.getListInfo(res);
    });
    console.log(111);
  },
  mounted() {},
  methods: {
    getListInfo(levelData) {
      getTeamWarn(
        Object.assign({
          id: this.$route.query.id,
          sampleCount: this.$route.query.sampleCount,
        })
      ).then((res) => {
        const data = res.data.data;
        this.headerData = data;
        this.factorCollection = data.factorCollection;
        this.factorCollection.map((item) => {
          for (let j = 0; j < levelData.data.data[0].children.length; j++) {
            const row = levelData.data.data[0].children[j];
            if (row.dictKey == item.level) {
              item.level = row.dictValue;
            }
          }
        });

        this.sampleInfoList = data.sampleInfoVOList;
        this.sampleHeaderList = data.sampleInfoVOList[0];
      });
    },
    handleDown() {
      htmlToPdf.downloadPDF(
        document.querySelector("#teamWarn"),
        "团体预警报告"
      );
    },
  },
};
</script>

<style scoped>
.minWidth {
  min-width: 50px;
}
.colorRed {
  color: red;
}
#teamWarn {
  background-color: #fff;
  /* width: 1000px; */
  /* height: 400px; */
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
}

.table_style td,
th {
  padding: 10px;
  font-size: 15px;
}

.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
</style>
